<template>
  <div class="mainSelect">
    <!-- 查询功能模块 -->
    <div class="select">
      <el-form ref="form" :model="selectEmployeeName" label-width="80px">
        <el-form-item label="姓名:">
          <el-input v-model="selectEmployeeName.empName" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="身份证:">
          <el-input v-model="selectEmployeeName.empIdCardNo" style="width: 180px"></el-input>
        </el-form-item>
        <el-form-item label="岗位:">
          <el-input v-model="selectEmployeeName.empJob" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="籍贯:">
          <el-input v-model="selectEmployeeName.empOrigo" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="用工性质:">
          <el-input v-model="selectEmployeeName.empType" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="毕业院校:">
          <el-input v-model="selectEmployeeName.empCollege" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-date-picker v-model="selectEmployeeName.empHirDate" type="daterange" range-separator="至"
            :start-placeholder="startTimeInput" :end-placeholder="endTimeInput"
            style="width: 270px; margin-right: 15px">
          </el-date-picker>
        </el-form-item>
        <div style="width:400px,height:100px">
          <el-form-item>
            <el-button type="success" @click="selectEmployee">查询</el-button>
<<<<<<< HEAD
            <el-button type="success" @click="add" style="margin-right: 10px"
              >添加</el-button
            >
            <el-button type="primary" style="margin-left: 20px" @click="upload"
              >上传<i class="el-icon-upload el-icon--right"></i
            ></el-button>
            <el-button
              type="primary"
              style="margin-left: 20px"
              @click="downloadAll"
              >下载全部<i class="el-icon-download el-icon--right"></i
            ></el-button>
            <el-button
              type="primary"
              style="margin-left: 20px"
              @click="downloadPage"
              >分页下载<i class="el-icon-download el-icon--right"></i
            ></el-button>
            <el-button type="primary" style="margin-left: 20px" v-print="'#Tab'"
              >打印<i class="el-icon-upload el-icon--right"></i
            ></el-button>
=======
            <el-button type="success" @click="add" style="margin-right: 10px">添加</el-button>
            <el-button type="primary" style="margin-left: 20px" @click="upload">上传<i
                class="el-icon-upload el-icon--right"></i></el-button>
            <el-button type="primary" style="margin-left: 20px" @click="download">下载<i
                class="el-icon-download el-icon--right"></i></el-button>
            <el-button type="primary" style="margin-left: 20px" v-print="'#Tab'">打印<i
                class="el-icon-upload el-icon--right"></i></el-button>
>>>>>>> 1085ebeffc9de7726919cf874ca041adc7265163
          </el-form-item>
        </div>
      </el-form>
    </div>

    

    <!-- 展示查询员工的信息 -->
    <TableTemplate :header="header" :tableData="tableData" :title="title" @editInfo="editInfo" @add="add"
      @deleteEmployee="deleteEmployee" id="Tab" />
    <!-- 分页功能 -->
    <Pagination :total="total" :employee="employee" @getCurrentPage="getCurrentPage" @getPageSize="getPageSize" />
    <!-- 点击添加按钮，弹出添加员工信息的弹窗 -->
    <el-dialog :title="title" :visible.sync="centerAddDialogVisible" width="50%" center>
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item :label="lable + ':'" v-for="(lable, prop, index) in adddialog" :key="index">
          <el-input v-model="addEmployeeName[prop]" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeName.empHirDate" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正时间:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeName.empRegDate" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正延顺:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeName.empPostpone" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="离职时间:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="addEmployeeName.empResTime" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注1:" prop="desc">
          <el-input type="textarea" v-model="addEmployeeName.remarks1" rows="5" cols="35"></el-input>
        </el-form-item>
        <el-form-item label="备注2:" prop="desc">
          <el-input type="textarea" v-model="addEmployeeName.remarks2" rows="5" cols="35"></el-input>
        </el-form-item>
        <el-form-item label="备注3:" prop="desc">
          <el-input type="textarea" v-model="addEmployeeName.remarks3" rows="5" cols="35"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerAddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmployee">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击编辑按钮显示对应员工的信息 -->
    <el-dialog :title="title" :visible.sync="centerEditDialogVisible" width="50%" center>
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item :label="lable + ':'" v-for="(lable, prop, index) in adddialog" :key="index">
          <el-input v-model="editEmployeeName[prop]" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="editEmployeeName.empHirDate" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正时间:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="editEmployeeName.empRegDate" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正延顺:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="editEmployeeName.empPostpone" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="离职时间:">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="editEmployeeName.empResTime" style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注1:" prop="desc">
          <el-input type="textarea" v-model="editEmployeeName.remarks1" rows="5" cols="35"></el-input>
        </el-form-item>
        <el-form-item label="备注2:" prop="desc">
          <el-input type="textarea" v-model="editEmployeeName.remarks2" rows="5" cols="35"></el-input>
        </el-form-item>
        <el-form-item label="备注3:" prop="desc">
          <el-input type="textarea" v-model="editEmployeeName.remarks3" rows="5" cols="35"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showEditInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击上传按钮显示上传的弹框 -->
    <el-dialog title="上传文件" :visible.sync="centerUploadDialogVisible" width="30%" center>
      <el-upload drag style="margin-left: 100px" class="upload-demo" ref="upload" accept=".xlsx, .xlsm, .xls"
        :auto-upload="false" action="#" :limit="1" :file-list="fileList" :on-change="handleChange"
        :on-exceed="handleExceed">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerUploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import data from "../json/dataTable.json";
// import download from "downloadjs";
export default {
  name: "EmployeeName",
  mounted() {
    this.selectPagination();
  },
  data() {
    return {
      employee: [],
      total: 0,
      tableData: [],
      pageSize: 4,
      currentPage: 1,
      fileList: [], //文件列表
      file: {},
      employeeType: ["实习期", "试用期", "转正期", "离职期"],
      dateDuring: "",
      // upFile: false,
      
      header: {
        // empId: "序号",
        empStaNum: "员工编号",
        empName: "姓名",
        empDept: "部门",
        empJob: "岗位",
        emJobLevel: "职级",
        empSex: "性别",
        empBirthday: "出生年月",
        empAge: "年龄",
        empMarried: "婚否",
        empOrigo: "籍贯",
        empFamiAddress: "户口所在地",
        empAccType: "户口性质",
        empIdCardNo: "身份证号码",
        empDegree: "学历",
        empCollege: "毕业院校",
        empColMajor: "专业",
        empType: "用工性质",
        empTel: "联系电话",
        empAddress: "家庭住址",
        empHirDate: "入职时间",
        empRegDate: "转正时间",
        empPostpone: "转正延顺",
        empResTime: "离职时间",
        empEngLevel: "外语水平",
        empSpecial: "特长",
        empProTitle: "职称",
        empNation: "民族",
        empPolStatus: "政治面貌",
        empSecId: "社保账号",
        empAccFundId: "公积金账号",
        empBank: "工资卡开户行",
        empBankCardId: "工资卡账号",
        empConcat: "紧急联系人",
        empIntTel: "联系方式",
        empRelationship: "关系",
        remarks1: "备注1",
        remarks2: "备注2",
        remarks3: "备注3",
        // emp_create_user: "创建人",
      },
      adddialog: {
        // empId: "序号",
        empStaNum: "员工编号",
        empName: "姓名",
        empDept: "部门",
        empJob: "岗位",
        emJobLevel: "职级",
        empSex: "性别",
        empBirthday: "出生年月",
        empAge: "年龄",
        empMarried: "婚否",
        empOrigo: "籍贯",
        empFamiAddress: "户口所在地",
        empAccType: "户口性质",
        empIdCardNo: "身份证号码",
        empDegree: "学历",
        empCollege: "毕业院校",
        empColMajor: "专业",
        empType: "用工性质",
        empTel: "联系电话",
        empAddress: "家庭住址",
        // empHirDate: "入职时间",
        // emp_reg_date: "转正时间",
        // emp_postpone: "转正延顺",
        // empResTime: "离职时间",
        empEngLevel: "外语水平",
        empSpecial: "特长",
        empProTitle: "职称",
        empNation: "民族",
        empPolStatus: "政治面貌",
        empSecId: "社保账号",
        empAccFundId: "公积金账号",
        empBank: "工资卡开户行",
        empBankCardId: "工资卡账号",
        empConcat: "紧急联系人",
        empIntTel: "联系方式",
        empRelationship: "关系",
      },
      selectEmployeeName: {
        empName: "",
        empIdCardNo: "",
        empJob: "",
        empOrigo: "",
        empType: "",
        empCollege: "",
        empHirDate: "",
        startDate: "",
        endDate: "",
      },
      newEmployeeName: {
        empName: "",
        empIdCardNo: "",
        empJob: "",
        empOrigo: "",
        empType: "",
        empCollege: "",
        empHirDate: "",
      },
      addEmployeeName: {
        empId: "",
        empStaNum: "",
        empName: "",
        empDept: "",
        empJob: "",
        emJobLevel: "",
        empSex: "",
        empBirthday: "",
        empAge: "",
        empMarried: "",
        empOrigo: "",
        empFamiAddress: "",
        empAccType: "",
        empIdCardNo: "",
        empDegree: "",
        empCollege: "",
        empColMajor: "",
        empType: "",
        empTel: "",
        empAddress: "",
        empHirDate: "",
        emp_reg_date: "",
        emp_postpone: "",
        empResTime: "",
        empEngLevel: "",
        empSpecial: "",
        empProTitle: "",
        empNation: "",
        empPolStatus: "",
        empSecId: "",
        empAccFundId: "",
        empBank: "",
        empBankCardId: "",
        empConcat: "",
        empIntTel: "",
        empRelationship: "",
        remarks1: "",
        remarks2: "",
        remarks3: "",
      },
      editEmployeeName: {
        empId: "",
        empStaNum: "",
        empName: "",
        empDept: "",
        empJob: "",
        emJobLevel: "",
        empSex: "",
        empBirthday: "",
        empAge: "",
        empMarried: "",
        empOrigo: "",
        empFamiAddress: "",
        empAccType: "",
        empIdCardNo: "",
        empDegree: "",
        empCollege: "",
        empColMajor: "",
        empType: "",
        empTel: "",
        empAddress: "",
        empHirDate: "",
        empRegDate: "",
        empPostpone: "",
        empResTime: "",
        empEngLevel: "",
        empSpecial: "",
        empProTitle: "",
        empNation: "",
        empPolStatus: "",
        empSecId: "",
        empAccFundId: "",
        empBank: "",
        empBankCardId: "",
        empConcat: "",
        empIntTel: "",
        empRelationship: "",
        remarks1: "",
        remarks2: "",
        remarks3: "",
      },
      title: "添加员工的信息",
      //控制添加弹窗的显示与隐藏，当点击添加按钮是值变为true
      centerAddDialogVisible: false,
      centerEditDialogVisible: false,
      labelPosition: "right",
      startTimeInput: "开始日期",
      endTimeInput: "结束日期",
      startTime: "",
      endTime: "",
      centerUploadDialogVisible: false,
      // 查询的时候输入了值时，flag为true
      flag: true,
    };
  },
  computed: {
    startDate() {
      return this.selectEmployeeName.empHirDate[0];
    },
    endDate() {
      return this.selectEmployeeName.empHirDate[1];
    },
  },
  methods: {
    //文件状态改变触发
    handleChange(file) {
      //(file,fileList)参数
      this.uploading = false;
      this.file = file;
    },
    //文件超出个数限制
    handleExceed() {
      this.$message.warning("仅允许上传一个文件！");
    },
    submitUpload() {
      if (!this.file.size) {
        this.$message.warning("请选择上传的文件");
        return;
      }
      // this.uploading = true;
      let formData = new FormData();
      formData.append("file", this.file.raw);
      this.$api.employeeRosterInfo
        .uploadEmployeeRosterFile(formData)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: "上传失败,请重新上传!",
            });
          }
          this.selectPagination();
        });
      this.centerUploadDialogVisible = false;
    },
    // 获取全部员工
    getAll() {
      this.$api.employeeRosterInfo.getEmployeeRosterAll().then((res) => {
        console.log(res);
      });
    },
    //点击删除按钮删除员工信息
    deleteEmployee(data) {
      console.log(data.empId);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.employeeRosterInfo
            .deleteEmployeeRoster(data.empId)
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                console.log(res.data.data.empType);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.selectPagination();
    },
    // 添加该名员工的信息，发生Ajax请求
    addEmployee() {
      // console.log(this.addEmployeeName);
      this.$api.employeeRosterInfo
        .addEmployeeRoster(this.addEmployeeName)
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else if (res.data.code == 408) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 430) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 410) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 409) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
          this.selectPagination();
        });
      this.addEmployeeName = {};
      this.centerAddDialogVisible = false;
    },
    // 编辑完员工的信息后，发生请求
    showEditInfo() {
      console.log(this.editEmployeeName);
      this.$api.employeeRosterInfo
        .updateEmployeeRoster(this.editEmployeeName)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else if (res.data.code == 408) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 430) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 410) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 409) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
          this.selectPagination();
        });
      this.centerEditDialogVisible = false;
    },
    // 模糊查询
    selectEmployee() {
      // console.log(this.selectEmployeeName.empHirDate);
      if (this.selectEmployeeName.empHirDate) {
        let empHirDate = this.selectEmployeeName.empHirDate[0]
          .toLocaleDateString()
          .split("/")
          .join("-");
        let empHirDateLast = this.selectEmployeeName.empHirDate[1]
          .toLocaleDateString()
          .split("/")
          .join("-");
        console.log(empHirDate);
        console.log(empHirDateLast);
        this.selectEmployeeName.startDate = empHirDate;
        this.selectEmployeeName.endDate = empHirDateLast;
        console.log(this.selectEmployeeName);
      }
      for (let k in this.selectEmployeeName) {
        if (this.selectEmployeeName[k] != "") {
          // 为false代表没有值
          this.flag = true;
          break;
        } else {
          // true代表有值
          this.flag = false;
        }
      }
      console.log(this.flag);
      if (!this.flag) {
        this.selectPagination();
      } else {
        this.$api.employeeRosterInfo
          .getEmployeeRosterListDate(
            this.currentPage,
            this.pageSize,
            this.selectEmployeeName
          )
          .then((res) => {
            // console.log(res);
            if (res.data.code == 200) {
              let data = res.data.data;
              // this.employee = data.records;
              this.tableData = data.records.map((item) => {
                item.empType = this.employeeType[item.empType];
                return item;
              });
              this.tableData = data.records;
              this.total = data.total;
              // this.selectEmployeeName = this.newEmployeeName;
            }
          });
      }
    },
    // 上传文件请求数据
    upload() {
      this.centerUploadDialogVisible = true;
    },

    downloadAll() {
      this.$api.employeeRosterInfo.downloadEmployeeRosterInfo1().then((res) => {
        console.log(res);
        const fileName = "one.xls";
        const elink = document.createElement("a");
        if ("download" in elink) {
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = window.URL.createObjectURL(res.data);
          document.body.appendChild(elink);
          elink.click();
          window.URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    // 分页下载员工
    downloadPage() {
      this.$api.employeeRosterInfo
        .downloadEmployeeRosterInfo2(this.currentPage, this.pageSize)
        .then((res) => {
          console.log(res);
          const fileName = "one.xls";
          const elink = document.createElement("a");
          if ("download" in elink) {
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = window.URL.createObjectURL(res.data);
            document.body.appendChild(elink);
            elink.click();
            window.URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
          } else {
            navigator.msSaveBlob(blob, fileName);
          }
        });
    },
    // 分页查询请求数据
    selectPagination() {
      this.$api.employeeRosterInfo
        .getEmployeeRosterListDate(
          this.currentPage,
          this.pageSize,
          this.selectEmployeeName
        )
        .then((res) => {
          /* console.log(res); */
          if (res.data.code == 200) {
            let data = res.data.data;
            this.tableData = data.records.map((item) => {
              item.empType = this.employeeType[item.empType];
              return item;
            });
            this.total = data.total;
          }
        });
    },
    // getCurrentPage 获取分页组件中传递过来的当前页page
    getCurrentPage(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // getPageSize   获取分页组件传递过来的每页显示多少条数据
    getPageSize(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // 显示添加员工信息的表单
    add() {
      this.centerAddDialogVisible = true;
    },
    // 点击编辑按钮显示编辑的信息
    editInfo(data) {
      this.centerEditDialogVisible = true;
      this.editEmployeeName = data;
      // console.log(this.editEmployeeName);
    },
  },
};
</script>

<style scoped lang="less">
.select {
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      flex: 16%;
    }
  }
}

.el-input {
  width: 85px;
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-dialog {
  transform: translate(-50%, 50%);

  .el-form {
    display: flex;
    flex-wrap: wrap;
    padding-right: 40px;

    .el-form-item {
      flex: 50%;
    }
  }

  .text {
    display: flex;
    flex-wrap: wrap;

    div {
      flex: 50%;

      span {
        display: inline-block;
        width: 100px;
        text-align: right;
        color: #606266;
      }

      textarea {
        vertical-align: middle;
        border: 1px solid #dcdfe6;
        outline: none;
      }
    }
  }
}
</style>
